<template>
    <view class="masonry">
        <template v-if="tabIndex === 0">
            <view class="column">
                <view class="card topic">
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/topic_1.jpg"></image>
                    <view class="name">忙里忙外，回家吃饭</view>
                    <view class="price">19.9元<text>起</text></view>
                    <view class="extra">
                        <text class="icon-heart">1220</text>
                        <text class="icon-preview">1000</text>
                    </view>
                </view>
                <view class="card brand">
                    <view class="locate">
                        <text class="icon-locate"></text>中国
                    </view>
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/brand_logo_6.jpg">
                    </image>
                    <view class="name">小米优购</view>
                    <view class="alt">小米优购闪购嗨购</view>
                </view>
                <view class="card goods">
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/goods_big_6.jpg"></image>
                    <view class="name">彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
                        鹅软石桌布yg056</view>
                    <view class="price">¥899</view>
                </view>
                <view class="card brand">
                    <view class="locate">
                        <text class="icon-locate"></text>中国
                    </view>
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/brand_logo_8.jpg">
                    </image>
                    <view class="name">小米优购</view>
                    <view class="alt">小米优购闪购嗨购</view>
                </view>
                <view class="card goods">
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/goods_big_7.jpg"></image>
                    <view class="name">彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
                        鹅软石桌布yg056</view>
                    <view class="price">¥899</view>
                </view>
            </view>
            <view class="column">
                <view class="card goods">
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/goods_big_5.jpg"></image>
                    <view class="name">彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
                        鹅软石桌布yg056</view>
                    <view class="price">¥899</view>
                </view>
                <view class="card brand">
                    <view class="locate">
                        <text class="icon-locate"></text>中国
                    </view>
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/brand_logo_7.jpg">
                    </image>
                    <view class="name">小米优购</view>
                    <view class="alt">小米优购闪购嗨购</view>
                </view>
                <view class="card topic">
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/topic_2.jpg"></image>
                    <view class="name">忙里忙外，回家吃饭</view>
                    <view class="price">19.9元<text>起</text></view>
                    <view class="extra">
                        <text class="icon-heart">1220</text>
                        <text class="icon-preview">1000</text>
                    </view>
                </view>
                <view class="card brand">
                    <view class="locate">
                        <text class="icon-locate"></text>中国
                    </view>
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/brand_logo_5.jpg">
                    </image>
                    <view class="name">小米优购</view>
                    <view class="alt">小米优购闪购嗨购</view>
                </view>
                <view class="card goods">
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/goods_big_3.jpg"></image>
                    <view class="name">彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
                        鹅软石桌布yg056</view>
                    <view class="price">¥899</view>
                </view>
            </view>
        </template>
        <template v-if="tabIndex === 1">
            <view class="column">
                <view class="card goods">
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/goods_big_7.jpg"></image>
                    <view class="name">彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
                        鹅软石桌布yg056</view>
                    <view class="price">¥899</view>
                </view>
                <view class="card brand">
                    <view class="locate">
                        <text class="icon-locate"></text>中国
                    </view>
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/brand_logo_8.jpg">
                    </image>
                    <view class="name">小米优购</view>
                    <view class="alt">小米优购闪购嗨购</view>
                </view>
                <view class="card topic">
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/topic_1.jpg"></image>
                    <view class="name">忙里忙外，回家吃饭</view>
                    <view class="price">19.9元<text>起</text></view>
                    <view class="extra">
                        <text class="icon-heart">1220</text>
                        <text class="icon-preview">1000</text>
                    </view>
                </view>
                <view class="card brand">
                    <view class="locate">
                        <text class="icon-locate"></text>中国
                    </view>
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/brand_logo_6.jpg">
                    </image>
                    <view class="name">小米优购</view>
                    <view class="alt">小米优购闪购嗨购</view>
                </view>
                <view class="card goods">
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/goods_big_6.jpg"></image>
                    <view class="name">彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
                        鹅软石桌布yg056</view>
                    <view class="price">¥899</view>
                </view>
            </view>
            <view class="column">
                <view class="card topic">
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/topic_2.jpg"></image>
                    <view class="name">忙里忙外，回家吃饭</view>
                    <view class="price">19.9元<text>起</text></view>
                    <view class="extra">
                        <text class="icon-heart">1220</text>
                        <text class="icon-preview">1000</text>
                    </view>
                </view>
                <view class="card brand">
                    <view class="locate">
                        <text class="icon-locate"></text>中国
                    </view>
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/brand_logo_5.jpg">
                    </image>
                    <view class="name">小米优购</view>
                    <view class="alt">小米优购闪购嗨购</view>
                </view>
                <view class="card goods">
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/goods_big_5.jpg"></image>
                    <view class="name">彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
                        鹅软石桌布yg056</view>
                    <view class="price">¥899</view>
                </view>
                <view class="card brand">
                    <view class="locate">
                        <text class="icon-locate"></text>中国
                    </view>
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/brand_logo_7.jpg">
                    </image>
                    <view class="name">小米优购</view>
                    <view class="alt">小米优购闪购嗨购</view>
                </view>
                <view class="card goods">
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/goods_big_3.jpg"></image>
                    <view class="name">彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
                        鹅软石桌布yg056</view>
                    <view class="price">¥899</view>
                </view>
            </view>
        </template>
        <template v-if="tabIndex === 2">
            <view class="column">
                <view class="card goods">
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/goods_big_6.jpg"></image>
                    <view class="name">彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
                        鹅软石桌布yg056</view>
                    <view class="price">¥899</view>
                </view>
                <view class="card brand">
                    <view class="locate">
                        <text class="icon-locate"></text>中国
                    </view>
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/brand_logo_8.jpg">
                    </image>
                    <view class="name">小米优购</view>
                    <view class="alt">小米优购闪购嗨购</view>
                </view>
                <view class="card topic">
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/topic_1.jpg"></image>
                    <view class="name">忙里忙外，回家吃饭</view>
                    <view class="price">19.9元<text>起</text></view>
                    <view class="extra">
                        <text class="icon-heart">1220</text>
                        <text class="icon-preview">1000</text>
                    </view>
                </view>
                <view class="card brand">
                    <view class="locate">
                        <text class="icon-locate"></text>中国
                    </view>
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/brand_logo_6.jpg">
                    </image>
                    <view class="name">小米优购</view>
                    <view class="alt">小米优购闪购嗨购</view>
                </view>
                <view class="card goods">
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/goods_big_7.jpg"></image>
                    <view class="name">彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
                        鹅软石桌布yg056</view>
                    <view class="price">¥899</view>
                </view>
            </view>
            <view class="column">
                <view class="card brand">
                    <view class="locate">
                        <text class="icon-locate"></text>中国
                    </view>
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/brand_logo_7.jpg">
                    </image>
                    <view class="name">小米优购</view>
                    <view class="alt">小米优购闪购嗨购</view>
                </view>
                <view class="card topic">
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/topic_2.jpg"></image>
                    <view class="name">忙里忙外，回家吃饭</view>
                    <view class="price">19.9元<text>起</text></view>
                    <view class="extra">
                        <text class="icon-heart">1220</text>
                        <text class="icon-preview">1000</text>
                    </view>
                </view>
                <view class="card goods">
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/goods_big_5.jpg"></image>
                    <view class="name">彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
                        鹅软石桌布yg056</view>
                    <view class="price">¥899</view>
                </view>
                <view class="card brand">
                    <view class="locate">
                        <text class="icon-locate"></text>中国
                    </view>
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/brand_logo_5.jpg">
                    </image>
                    <view class="name">小米优购</view>
                    <view class="alt">小米优购闪购嗨购</view>
                </view>
                <view class="card goods">
                    <image mode="widthFix" src="http://static.botue.com/erabbit/static/uploads/goods_big_3.jpg"></image>
                    <view class="name">彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
                        鹅软石桌布yg056</view>
                    <view class="price">¥899</view>
                </view>
            </view>
        </template>
    </view>
</template>  
 
<script>
export default {
    props: ["tabIndex"]
}

</script>
<style lang="scss">
/* 瀑布流布局 */
.masonry {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 0;

    .column {
        width: 345rpx;

        .card {
            padding: 20rpx 15rpx;
            margin-bottom: 20rpx;
            border-radius: 8rpx;
            background-color: #fff;
        }
    }

    .card {
        .name {
            font-size: 24rpx;
            color: #333;
            margin-top: 10rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .price {
            line-height: 1;
            font-size: 22rpx;
            color: #cf4444;
        }

        .locate {
            text-align: left;
            color: #999;
            margin-bottom: 10rpx;
            font-size: 24rpx;
        }
    }

    .topic {
        .price {
            margin: 10rpx 0;

            text {
                color: #999;
            }
        }

        .extra {
            line-height: 1;
            font-size: 22rpx;
            color: #666;
        }
    }

    .extra {
        text {
            margin-right: 14rpx;

            &::before {
                margin-right: 4rpx;
            }
        }
    }

    .icon-preview {
        &:before {
            font-size: 25rpx;
        }
    }

    .goods {
        .price {
            margin-top: 10rpx;
        }
    }

    .brand {
        text-align: center;

        .name {
            margin: 10rpx 0 8rpx;
        }

        .alt {
            line-height: 1;
            color: #666;
            font-size: 24rpx;
        }
    }
}
</style>
